<script setup>
import { onMounted, onUnmounted } from "vue";
import router from "@/router/index";
import { _$, $, to } from "./index";

onMounted(() => {
  $.onSearch();
});

onUnmounted(() => {
  $.clean();
});
</script>

<template>
  <el-space direction="vertical" fill wrap class="w-fill" :size="20">
    <el-page-header @back="router.back()" size="small">
      <template #content>
        <span class="text-large font-600 mr-3">健康数据管理</span>
      </template>
    </el-page-header>

    <el-card class="w-fill" shadow="never">
      <el-tabs
        v-model="_$.state.activeName"
        class="demo-tabs"
        @tab-click="$.onTabClick"
        stretch
      >
        <el-tab-pane label="疾病史" name="disease">
          <el-space direction="vertical" fill wrap class="w-fill" :size="20">
            <el-card class="w-fill" shadow="never">
              <div style="display: flex; justify-content: space-between">
                <el-form
                  label-width="auto"
                  :inline="true"
                  :model="_$.query.requestParam"
                  size="small"
                  class="demo-form-inline"
                >
                  <el-form-item label="搜索条件">
                    <el-input
                      v-model="_$.query.requestParam.condition"
                      clearable
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-space wrap>
                      <el-button @click="$.onReset">重置</el-button>
                      <el-button type="primary" @click="$.onSearch"
                        >查询</el-button
                      >
                    </el-space>
                  </el-form-item>
                </el-form>
                <el-button
                  type="success"
                  size="small"
                  @click="router.push('/portal/health-data/edit?type=1')"
                  >录入</el-button
                >
              </div>
            </el-card>
            <el-space direction="vertical" fill wrap class="w-fill" :size="20">
              <el-card
                v-for="item in _$.query.responseParam.records"
                :key="'recipe-card' + item.id"
                shadow="hover"
              >
                <template #header>
                  <div class="card-header">
                    <div style="display: flex; justify-content: space-between">
                      <el-button
                        type="info"
                        size="small"
                        @click="
                          router.push(
                            '/portal/health-data/edit?type=1&id=' + item.id
                          )
                        "
                      >
                        编辑
                      </el-button>
                      <el-button
                        type="danger"
                        icon="delete"
                        size="small"
                        link
                        @click="$.onDelete(item.id)"
                      >
                      </el-button>
                    </div>
                  </div>
                </template>
                <el-descriptions
                  title="疾病信息"
                  direction="vertical"
                  :column="8"
                >
                  <el-descriptions-item label="疾病名称">
                    {{ item.diseaseName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="病情描述">
                    {{ item.description }}
                  </el-descriptions-item>
                  <el-descriptions-item label="确诊时间">
                    {{ item.date }}
                  </el-descriptions-item>
                  <el-descriptions-item label="确诊医院">
                    {{ item.hospital }}
                  </el-descriptions-item>
                  <el-descriptions-item label="治疗情况">
                    {{ item.treatmentStatus }}
                  </el-descriptions-item>
                  <el-descriptions-item label="治疗效果">
                    {{ item.treatmentEffect }}
                  </el-descriptions-item>
                </el-descriptions>
                <el-descriptions
                  title="用药信息"
                  direction="vertical"
                  :column="8"
                >
                  <el-descriptions-item label="药名">
                    {{ item.drug?.medicalName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="指导医生">
                    {{ item.drug?.guiddoctor }}
                  </el-descriptions-item>
                  <el-descriptions-item label="用法用量">
                    {{ item.drug?.dosage }}
                  </el-descriptions-item>
                  <el-descriptions-item label="开始用药时间">
                    {{ item.drug?.startTime }}
                  </el-descriptions-item>
                  <el-descriptions-item label="结束用药时间">
                    {{ item.drug?.endTime }}
                  </el-descriptions-item>
                  <el-descriptions-item label="用药评价">
                    {{ item.drug?.evaluation }}
                  </el-descriptions-item>
                </el-descriptions>
              </el-card>
            </el-space>
          </el-space>
        </el-tab-pane>
        <el-tab-pane label="过敏史" name="allergy">
          <el-space direction="vertical" fill wrap class="w-fill" :size="20">
            <el-card class="w-fill" shadow="never">
              <div style="display: flex; justify-content: space-between">
                <el-form
                  label-width="auto"
                  :inline="true"
                  :model="_$.query.requestParam"
                  size="small"
                  class="demo-form-inline"
                >
                  <el-form-item label="搜索条件">
                    <el-input
                      v-model="_$.query.requestParam.condition"
                      clearable
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-space wrap>
                      <el-button @click="$.onReset">重置</el-button>
                      <el-button type="primary" @click="$.onSearch"
                        >查询</el-button
                      >
                    </el-space>
                  </el-form-item>
                </el-form>
                <el-button
                  type="success"
                  size="small"
                  @click="router.push('/portal/health-data/edit?type=2')"
                  >录入</el-button
                >
              </div>
            </el-card>
            <el-space direction="vertical" fill wrap class="w-fill" :size="20">
              <el-card
                v-for="item in _$.query.responseParam.records"
                :key="'recipe-card' + item.id"
                shadow="hover"
              >
                <template #header>
                  <div class="card-header">
                    <div style="display: flex; justify-content: space-between">
                      <el-button
                        type="info"
                        size="small"
                        @click="
                          router.push(
                            '/portal/health-data/edit?type=2&id=' + item.id
                          )
                        "
                      >
                        编辑
                      </el-button>
                      <el-button
                        type="danger"
                        icon="delete"
                        size="small"
                        link
                        @click="$.onDelete(item.id)"
                      >
                      </el-button>
                    </div>
                  </div>
                </template>
                <el-descriptions direction="vertical" :column="8">
                  <el-descriptions-item label="过敏信息">
                    {{ item.allergyName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="症状描述">
                    {{ item.description }}
                  </el-descriptions-item>
                  <el-descriptions-item label="发生时间">
                    {{ item.date }}
                  </el-descriptions-item>
                  <el-descriptions-item label="过敏源">
                    {{ item.source }}
                  </el-descriptions-item>
                </el-descriptions>
              </el-card>
            </el-space>
          </el-space>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </el-space>
</template>

<style scoped></style>
